<template>
	<view class="container">
		<!-- 顶部标题 -->
		<u-navbar title="评价医生" :autoBack="true"></u-navbar>

		<!-- 医生信息卡片 -->
		<view class="doctor-card">
			<u-image width="80rpx" height="80rpx" shape="circle" :src="doctorInfo.avatar"></u-image>
			<view class="doctor-info">
				<text class="doctor-name">{{ doctorInfo.name }}</text>
				<text class="doctor-title">{{ doctorInfo.department }} |
					{{ doctorInfo.department == 0 ? "主治医师" : doctorInfo.title == 1 ? "副主任医师" : "主任医师" }}</text>
			</view>
		</view>

		<!-- 评分区域 -->
		<view class="section">
			<view class="section-title">
				<text>总体评价</text>
			</view>
			<view class="rating-group">
				<u-rate v-model="overallRating" active-color="#FF7D00" size="40" gutter="15"></u-rate>
				<text class="rating-text">{{ overallRatingText }}</text>
			</view>
		</view>

		<!-- 详细评价 -->
		<view class="section">
			<view class="section-title">
				<text>详细评价</text>
			</view>

			<!-- 态度评分 -->
			<view class="rating-item">
				<text class="item-label">服务态度</text>
				<u-rate v-model="attitudeRating" active-color="#FF7D00" size="30" gutter="10"></u-rate>
			</view>

			<!-- 专业评分 -->
			<view class="rating-item">
				<text class="item-label">专业能力</text>
				<u-rate v-model="professionalRating" active-color="#FF7D00" size="30" gutter="10"></u-rate>
			</view>

			<!-- 响应速度 -->
			<view class="rating-item">
				<text class="item-label">响应速度</text>
				<u-rate v-model="responseRating" active-color="#FF7D00" size="30" gutter="10"></u-rate>
			</view>
		</view>

		<!-- 评论输入 -->
		<view class="section">
			<view class="section-title">
				<text>问诊体验</text>
			</view>
			<u-input v-model="commentText" type="textarea" placeholder="分享您的问诊体验，帮助其他患者了解这位医生..." height="200" border
				:border-color="inputBorderColor" maxlength="500" :clearable="false"></u-input>
			<view class="word-count">{{ commentText.length }}/500</view>
		</view>

		<!-- 标签选择 -->
		<!-- <view class="section">
			<view class="section-title">
				<text>选择标签（可选）</text>
			</view>
			<view class="tag-group">
				<u-tag v-for="(tag, index) in tags" :key="index" :text="tag"
					:type="selectedTags.includes(tag) ? 'error' : 'info'" shape="circle" @click="toggleTag(tag)"
					class="tag-item"></u-tag>
			</view>
		</view> -->

		<!-- 匿名评价 -->
		<!-- <view class="section">
			<view class="anonymous-row">
				<text>匿名评价</text>
				<u-switch v-model="isAnonymous" active-color="#FF7D00"></u-switch>
			</view>
		</view> -->

		<!-- 提交按钮 -->
		<view class="submit-btn">
			<u-button type="error" shape="circle" :disabled="!canSubmit" @click="submitComment"
				:loading="submitting">提交评价</u-button>

		</view>
	</view>
</template>

<script>
	import {
		getDoctorInfos,
		insertComments
	} from '@/api/order.js'
	export default {
		data() {
			return {
				doctorInfo: {
					name: "张医生",
					title: "主任医师",
					department: "心血管内科",
					avatar: "https://cdn.uviewui.com/uview/template/SmilingDog.jpg"
				},
				overallRating: '',
				attitudeRating: '',
				professionalRating: '',
				responseRating: '',
				commentText: "",
				inputBorderColor: "#f0f0f0",
				/* isAnonymous: false, */
				submitting: false,
				/* tags: [
					"态度很好", "解释耐心", "回复及时",
					"专业严谨", "经验丰富", "推荐用药有效",
					"问诊仔细", "很有亲和力", "不太推荐"
				],
				selectedTags: [], */
				medicalRecordId: '' //就诊记录id
			}
		},
		computed: {
			overallRatingText() {
				const texts = [
					"非常不满意",
					"不满意",
					"一般",
					"满意",
					"非常满意"
				];
				return texts[this.overallRating - 1];
			},
			canSubmit() {
				return this.commentText.trim().length > 5 || this.overallRating <= 5;
			}
		},
		onLoad(options) {
			// options 中包含了跳转时传递的所有参数
			if (options.medicalRecordId) {
				this.medicalRecordId = options.medicalRecordId
				// 可以在这里根据ID获取相关数据
				/* console.log('接收的medicalRecordId:', this.medicalRecordId) */
			}
		},
		mounted() {
			this.getDoctorInfo()
		},
		methods: {
			getDoctorInfo() {
				let temp = {
					medicalRecordId: this.medicalRecordId
				}
				getDoctorInfos(temp).then(res => {
					//console.log(res)
					if (res.code === 1) {
						this.doctorInfo = {
							name: res.data.doctorName,
							title: res.data.doctorLevelId,
							department: res.data.departmentName,
							avatar: res.data.avatar
						}
					}
				})
			},
			/* toggleTag(tag) {
				const index = this.selectedTags.indexOf(tag);
				if (index === -1) {
					this.selectedTags.push(tag);
				} else {
					this.selectedTags.splice(index, 1);
				}
			}, */
			submitComment() {
				if (!this.canSubmit) return;

				this.submitting = true;
				//计算平均数
				const average = (this.overallRating + this.attitudeRating + this.professionalRating + this
					.responseRating) / 4
				let temp = {
					medicalRecordId: this.medicalRecordId,
					userId: this.$store.state.userId,
					average: average,
					commentText: this.commentText
				}
				console.log(temp)
				insertComments(temp).then(res => {
					console.log(res)
					if (res.code === 1) {
						setTimeout(() => {
							this.submitting = false;
							uni.showToast({
								title: "评价提交成功",
								icon: "success"
							});
							// 提交成功后返回上一页
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}, 1000);
					} else {
						uni.showToast({
							title: "评价提交失败",
							icon: "error"
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 40rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.doctor-card {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.doctor-info {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;

			.doctor-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.doctor-title {
				font-size: 26rpx;
				color: #999;
				margin-top: 8rpx;
			}
		}
	}

	.section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.section-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
		}
	}

	.rating-group {
		display: flex;
		align-items: center;

		.rating-text {
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #FF7D00;
		}
	}

	.rating-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.item-label {
			font-size: 28rpx;
			color: #666;
			width: 150rpx;
		}
	}

	.word-count {
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.tag-group {
		display: flex;
		flex-wrap: wrap;

		.tag-item {
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.anonymous-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #666;
	}

	.submit-btn {
		padding: 40rpx 30rpx;
	}
</style>